<template>
  <div>
    <div class="dp-title dp-real_title">{{ title }}</div>
    <div class="dp-list_wrap">
      <!--    <div class="dp-title" v-if="cityLv == 1">全国各省市店铺注册数</div>
      <div class="dp-title" v-if="cityLv == 2">{{ cityList[1] }}各市店铺注册数</div>
      <div class="dp-title" v-if="cityLv == 3">按户籍统计注册店铺数</div>-->

      <div class="dp-nav">
        <div class="nav_item" v-for="iitem in navList" :key="iitem">{{ iitem }}</div>
      </div>
      <div class="dp_wrap_content_wrap">
        <transition-group appear class="transition">
          <div class="content" v-for="(item, index) in list" :key="index" :data="`${index};id=${item.id}`">
            <span class="No">No.{{ item.id }}</span>
            <span class="name">{{ item.name }}</span>
            <span v-if="item.merchantCount" class="value">{{ item.merchantCount }}</span>
            <span v-else-if="title.indexOf('丽水') > -1" class="value">{{ item.values }}</span>
            <span v-else class="value">{{ item.values[0] + item.values[1] }}</span>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
import { getCityList } from '../../left/testCity.js'
import chinaThree from '../../map/chinaThree.json'
import { qg, qg_sheng, qg_shi } from '../../left/qg.js'
import http from '@/utils/request'
export default {
  props: {
    cityLv: {
      type: Number,
      default: 1,
    },
    cityList: {
      type: Array,
      default() {
        return []
      },
    },
    prov: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      qgReal: [],
      navList: ['排名', '省份', '商户数(户)'],
      list: [],
      timer1: null,
      timer2: null,
      timer3: null,

      cityAllList: [],
      provinces: [],
      title: '全国各省市商户注册数',
      lishuiData: [],
    }
  },
  watch: {
    prov: function (newVal, oldVal) {
      // console.log("newVal==",newVal)
      this.provinces = newVal
      this.$set(this, 'provinces', newVal)
      this.initPage()
    },
    // list: {
    //   handler(newValue, oldValue) {
    //     // console.log('newValue', newValue,oldValue)
    //   },
    //   deep: true,
    // },
  },
  created() {
    // this.resetChina(chinaThree, this.cityAllList, 0)
    // this.clearTime()
    // this.initPage()
  },
  mounted() {
    let that = this
    // console.log('topTitle', this.$topTitle)
    // this.$bus.off('currentCityNameHeader')
    this.$bus.on('currentCityNameHeader', name => {
      // that.title = name==='丽水市'?`${name}各区县`:'全国各省市'
      if (name === '丽水市') {
        this.getLishuiData()
        that.title = `${name}各区县商户数排名`
        // that.$topTitle = '丽水'
      } else {
        that.title = `全国各省市商户注册数`
        this.list = []
        this.resetChina(chinaThree, this.cityAllList, 0) //还原数据
        this.clearTime()
        this.initPage()
        that.$topTitle = '域外'
      }
      // console.log("that.$topTitle==",that.$topTitle)
      // console.log(lv)
      // this.currentName = name
      // this.nameLv = lv
    })
  },

  methods: {
    async initPage() {
      const res = await this.$http.post('/khy/showData/getData', {}, { isLoading: false })
      let provinceData = res['provinceData']
      if (this.provinces.length > 0) {
        this.provinces.forEach(item => {
          item.name = item.province
          item.value = item.merchantCount
        })
        this.$set(this, 'qgReal', this.provinces)
      } else {
        this.qgReal = eval(provinceData.replace(/[\r\n]/g, ''))
      }
      this.changeCity(this.cityList.length)
    },
    clearTime() {
      clearTimeout(this.timer1)
      clearTimeout(this.timer2)
      clearTimeout(this.timer3)
      this.timer1 = null
      this.timer2 = null
      this.timer3 = null
    },
    changeCity(len, type) {
      this.list = []
      let flag =
        location.href.indexOf('realIndex') > 0 ||
        location.href.indexOf('DemoDet') > 0 ||
        location.href.indexOf('demoDet') > 0
      switch (len) {
        case 0:
          this.list = JSON.parse(JSON.stringify(flag ? this.qgReal : qg))
          break
        case 1:
          this.list = JSON.parse(JSON.stringify(flag ? this.qgReal : qg))
          break
        case 2:
          // eslint-disable-next-line no-case-declarations
          const shengArr = JSON.parse(JSON.stringify(getCityList(this.cityAllList, this.cityList, [])))
          shengArr.forEach((item, index) => {
            this.list.push({ name: item, values: qg_sheng[index].values })
          })
          break
        case 3: //
          // eslint-disable-next-line no-case-declarations
          let shiArr = JSON.parse(JSON.stringify(getCityList(this.cityAllList, this.cityList, [])))
          if (type) {
            const arr = this.lishuiData || []
            // debugger
            // console.log("arr===",arr);
            this.navList[1] = '区县'
            this.list = []
            // const cityArr = ['莲都区','青田县','龙泉市','景宁畲族自治县','缙云县','松阳县','云和县','庆元县','遂昌县']
            arr.forEach(item => {
              this.list.push({ name: item.areaName, values: item.count })
            })
          } else {
            this.navList[1] = '省市'
            shiArr.forEach((item, index) => {
              this.list.push({ name: item, values: qg_shi[index].values })
            })
          }
          break
      }

      this.list.forEach((item, index) => {
        this.$set(item, 'id', index + 1)
      })
      // console.log('this.list==', this.list)
      this.startTime()
    },
    async getLishuiData() {
      const res = await http.get('/shop/touristCount', { isLoading: false, baseURL: 'http://111.1.139.66:8081' })

      this.lishuiData = res || []
      // console.log("lishuiData==",this.lishuiData)
      this.changeCity(3, 1)
    },
    resetChina(list, arr, n) {
      list.forEach((item, index) => {
        let jtem = { text: item.name ? item.name : item, value: n + index + '' }
        arr.push(jtem)
        if (item.children && item.children.length > 0) {
          jtem.children = []
          this.resetChina(item.children, jtem.children, jtem.value)
        }
      })
    },
    startTime() {
      let _that = this
      clearInterval(_that.timer1)
      let n = 0
      _that.timer1 = setInterval(() => {
        if (n >= _that.list.length - 1) {
          _that.startTime()
        }

        let itObj = JSON.parse(JSON.stringify(_that.list[0]))
        _that.list.splice(0, 1)
        _that.timer2 = setTimeout(() => {
          _that.list.push(itObj)
          clearTimeout(_that.timer2)
        }, 1000)
        n = n + 1
      }, 3000)
    },
  },
}
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(-150px);
}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}

/* 下面的 .v-move 和 .v-leave-active 配合使用，
能够实现列表后续的元素，渐渐飘上的效果（一般常用组合）*/
.v-move {
  transition: all 1s ease;
}

.v-leave-active {
  position: absolute;
}
.dp-title {
  padding-top: 50px;
  padding-bottom: 70px;
  width: 100%;
  text-align: center;
  font-size: 60px;
  line-height: 64px;
  color: #fff;
}
.dp-real_title {
  width: 100%;
  margin-top: 20px;
  height: 84px;
  float: left;
  text-align: left;
  color: #fff;
  font-size: 60px;
  margin-bottom: 30px;
  padding-top: 0;
  line-height: 84px;
}
.dp-list_wrap {
  width: 100%;
  height: 100%;
  float: left;
  background-color: rgba(7, 22, 79, 0.8);

  .dp-nav {
    width: 100%;
    height: 112px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 48px;
    line-height: 112px;
    color: #fff;
    .nav_item {
      width: 15%;
      text-align: center;
      color: #fff;
    }
    .nav_item:first-child {
      width: 25%;
    }
    .nav_item:last-child {
      width: 35%;
    }
  }

  .dp_wrap_content_wrap {
    height: 1374px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    .transition {
      width: 100%;
      .content {
        width: 100%;
        height: 71px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36px;
        line-height: 71px;
        padding-top: 42px;
        .No {
          width: 25%;
          text-align: center;
          color: #58aacd;
          font-weight: bold;
          line-height: 71px;
        }
        .name {
          // width: 20%;
          width: 28%;
          line-height: 71px;
          text-align: center;
          color: #fff;
        }
        .value {
          width: 35%;
          text-align: center;
          color: #29acd5;
          line-height: 71px;
          font-weight: bold;
        }
      }
    }
  }
  .dp_wrap_content_wrap:hover {
    overflow-y: auto;
  }
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  .dp_wrap_content_wrap::-webkit-scrollbar {
    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/
    position: relative;
  }
  /*定义滚动条的轨道颜色、内阴影及圆角*/
  .dp_wrap_content_wrap::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgb(31, 49, 97);
    border-radius: 3px;
  }
  /*定义滑块颜色、内阴影及圆角*/
  .dp_wrap_content_wrap::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgb(55, 80, 148);
    width: 5px;
    position: absolute;
  }
}
</style>
